import { Table, TableProps, Image, Space, Button, Modal } from "antd";
import QueryForm from "./components/QueryForm";
import { type Navigation } from "../../../types/content/navigation";
import PermissionBtn from "@/components/PermissionBtn";
import { ExclamationCircleFilled, PlusOutlined } from "@ant-design/icons";
import { useNavigationList } from "./hooks/useNavigationList";
import OptionForm from "./components/OptionForm";
import { useNavigationOption } from "./hooks/useNavigationOption";

export default function Navigation() {
  const { setSearchForm, tableData, loading, removeNavInf ,getNavList} =
    useNavigationList();
    const {
      isModalOpen,
      optionType,
      oldInfo,
      close,
      openOptionDialog
    }= useNavigationOption()
  const showConfirm = (row: Navigation.Row) => {
    Modal.confirm({
      title: "警告",
      icon: <ExclamationCircleFilled />,
      content: `确认删除【${row.name}】?`,
      okText: "确认",
      cancelText: "取消",
      okType: "danger",
      onOk() {
        removeNavInf(row);
      },
    });
  };
  const columns: TableProps<Navigation.Row>["columns"] = [
    {
      title: "名称",
      dataIndex: "name",
      key: "name",
      width: 180,
      ellipsis: true,
      fixed: "left",
      align: "center",
    },
    {
      title: "类型",
      dataIndex: "type",
      key: "type",
      width: 100,
      ellipsis: true,
      align: "center",
    },
    {
      title: "logo",
      dataIndex: "logo",
      key: "logo",
      width: 100,
      align: "center",
      render: (_, { logo }) => (
        <>{logo && <Image width={35} height={35} src={logo} />}</>
      ),
    },

    {
      title: "url",
      key: "address",
      dataIndex: "address",
      ellipsis: true,
      width: 180,
      align: "center",
      render: (_, { address }) => (
        <a href={address} target="_blank">
          {address}
        </a>
      ),
    },
    {
      title: "描述",
      key: "description",
      dataIndex: "description",
      ellipsis: true,
      width: 180,
      align: "center",
    },
    {
      title: "创建时间",
      key: "createTime",
      dataIndex: "createTime",
      width: 180,
      align: "center",
    },
    {
      title: "更新时间",
      key: "updateTime",
      dataIndex: "updateTime",
      width: 180,
      align: "center",
    },

    {
      title: "操作",
      key: "action",
      fixed: "right",
      width: 140,
      align: "center",
      render: (_, row) => (
        <Space size={2} wrap>
          <PermissionBtn code="navigation.edit">
            <Button
              type="link"
              onClick={() => {
                openOptionDialog('edit',row);
              }}
            >
              编辑
            </Button>
          </PermissionBtn>
          <PermissionBtn code="navigation.remove">
            <Button
              type="link"
              danger
              onClick={() => {
                showConfirm(row);
              }}
            >
              删除
            </Button>
          </PermissionBtn>
        </Space>
      ),
    },
  ];
  return (
    <div className="page__wrap--g">
      <div className="form__wrap--g">
        <QueryForm
          onChange={(form: Navigation.Query) => {
            setSearchForm(form);
          }}
        />
        <PermissionBtn code="navigation.add">
          <Button
            type="primary"
            icon={<PlusOutlined />}
            size="middle"
            onClick={() => {
              openOptionDialog('add')
            }}
          >
            新增导航
          </Button>
        </PermissionBtn>
      </div>

      <div className="table__wrap--g no-page">
        <Table
          bordered
          size="small"
          columns={columns}
          dataSource={tableData}
          rowKey="id"
          loading={loading}
          sticky
          scroll={{ x: 1300 }}
          pagination={false}
        />
      </div>
      {isModalOpen && (
        <OptionForm
          isModalOpen={isModalOpen}
          optionType={optionType}
          oldInfo={oldInfo}
          close={close}
          change={() => {
            getNavList();
          }}
        />
      )}
    </div>
  );
}
